<template>
  <el-button v-bind="getButtonProps">
    {{ btn.label }}
  </el-button>
</template>

<script lang="ts">
export default {
  name: "Button",
};
</script>
<script setup lang="ts">
import { ButtonSchema } from '@/types/table';

interface ProButtonProps {
  btn: ButtonSchema;
  row: any;
  index: number;
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProButtonProps>(), {});

function isFunction(fn: any) {
  return typeof fn === "function";
}

const getButtonProps = computed(() => {
  const { btn } = toRefs(props);

  const disabled = (isFunction(btn.value.disabled) ? btn.value.disabled!(props.row) : false) as boolean;

  const onClick = isFunction(btn.value.on?.click)
    ? () => {
        btn.value.on?.click!(props.row, props.index);
      }
    : () => {};

  return {
    size: "small",
    type: "primary",
    link: true,
    ...btn.value,
    disabled,
    onClick
  };
});
</script>

<style></style>
